<!-- 产品 -->
<template>
    <div class="view-page">
        <section class="us-header">
            <img class="header_img" src="../../assets/images/bounty/about-us-desktop.webp" alt="">
            <div class="header_content">
                <div class="header_content_inner">
                    <div class="header_t1">Brand Trustworthy Quality</div>
                    <div class="header_t2">About Harvest Gain</div>
                    <div class="header_t3">
                        Since our inception, we have been providing you with the best services with the help of our
                        talented researchers and scientists.
                    </div>
                </div>
            </div>
        </section>
        <section class="us-summary">
            <div class="summary_info">
                <div class="summary_img_box">
                    <img class="summary_img" src="../../assets/images/bounty/photo_6055432339065605216_y.jpg" alt="">
                </div>
                <div class="summary_data">
                    <h1 class="summary_title">About Us</h1>
                    <div class="summary-description">
                        <p>Harvest Gain Biotech, based in Denver, Colorado, is a biotechnology company dedicated to
                            combining science, health, and compassion.</p>
                        <p>Our mission — “Science protects health, and faith delivers love.”</p>
                        <p>Our core research team comes from Enshi, China — the World Capital of Selenium, with nearly a
                            century of expertise in selenium science.</p>
                        <p>Building on this legacy, we developed the High-Activity Organic Selenium Tablet, designed to
                            strengthen immunity, boost metabolism, protect the heart, and slow aging.</p>
                        <p>Through our Love Transmission Program, each purchase contributes to health and charity —
                            supporting churches, senior homes, and families in need.</p>
                        <p>At Harvest Gain, we believe health and love should grow together.</p>
                        <p>Let kindness become a habit, and health a shared blessing.</p>
                    </div>
                </div>
            </div>
            <div class="summary_info">
                <div class="summary_data">
                    <h1 class="summary_title">Membership & Reward Concept</h1>
                    <div class="summary-description">
                        <p>At Harvest Gain, becoming a member means more than joining a program —
                            it’s joining a purpose.
                        </p>
                        <p>Every member is part of a living circle of health, blessing, and love.</p>
                        <p>Your contribution not only supports your own well-being,
                            but also brings hope to families, churches, and communities in need.</p>
                        <p>Through our Love Transmission Program,
                            every act of sharing creates ripple effects —
                            spreading kindness, inspiring faith, and building a better tomorrow.
                        </p>
                        <p>Earn blessings.</p>
                        <p>Share health.</p>
                        <p>Pass on love.</p>
                    </div>
                </div>
                <div class="summary_img_box">
                    <img class="summary_img" src="../../assets/images/bounty/au_img2.png" alt="">
                </div>
            </div>
            <div class="summary_info">
                <div class="summary_img_box">
                    <img class="summary_img" src="../../assets/images/bounty/about-us-1.webp" alt="">
                </div>
                <div class="summary_data">
                    <h1 class="summary_title">At Harvest Gain, we believe your body is brilliant.</h1>
                    <div class="summary-description">
                        <p>Sometimes our systems can use a little support to run at their best. And that’s where we come
                            in.
                        </p>
                        <p>Harvest Gain has delivered quality offerings to supplement your body’s own ingenious systems
                            with everything to help you eat, sleep, thrive, repeat.
                        </p>
                        <p>Our dedication to quality, consistency, and scientific research has resulted in a portfolio
                            of wellness solutions that work hard and are formulated to give you the nutrients you need.
                            By combining the latest breakthroughs in nutritional science with great ingredients, we’re
                            proud to provide you outstanding quality and value.
                        </p>
                    </div>
                </div>
            </div>
            <div class="summary_info">
                <div class="summary_data">
                    <h1 class="summary_title">Quality and Care</h1>
                    <div class="summary-description">
                        <p>Harvest Gain supplements are overseen by our scientists, manufacturing specialists and
                            quality experts, each one dedicated to maintaining high quality standards. As part of our
                            commitment to quality, we only use ingredients from suppliers that meet our stringent
                            Quality Assurance Standards, as well as GMP supplement quality standards.
                        </p>
                        <p>Every product is subjected to numerous quality tests and assays throughout the manufacturing
                            process to verify purity and potency.
                        </p>
                    </div>
                </div>
                <div class="summary_img_box">
                    <img class="summary_img" src="../../assets/images/aboutUs/a1.png" alt="">
                </div>
            </div>
        </section>
        <!-- <img :src="bgImage" alt="Background" class="bg-img-t" /> -->
        <!-- 图片文字滚动区域 -->
        <section class="us-sticky">
            <div class="sticky_img_box">
                <img class="sticky_img" src="../../assets/images/bounty/us-scorll-1.jpg" alt="">
            </div>
            <div class="sticky_text1" style="position: sticky;top: calc(50% - 100px);">
                <div class="custom_pos_l">
                    From your head to <br> your heels
                </div>
            </div>
            <div class="sticky_text1" style="z-index: 900;" v-scroll-show="'zoom-in'">
                <div class="custom_pos_r">
                    <div class="custom_pos_text">Eat</div>
                </div>
            </div>
            <div class="sticky_text1" style="z-index: 900;" v-scroll-show="'zoom-in'">
                <div class="custom_pos_r">
                    <div class="custom_pos_text">Sleep</div>
                </div>
            </div>
            <div class="sticky_text1" style="z-index: 900;" v-scroll-show="'zoom-in'">
                <div class="custom_pos_r">
                    <div class="custom_pos_text">Thrive</div>
                </div>
            </div>
            <div class="sticky_text1" style="z-index: 900;" v-scroll-show="'zoom-in'">
                <div class="custom_pos_r">
                    <div class="custom_pos_text">Repeat.</div>
                </div>
            </div>

            <div class="sticky_img_box" style="z-index: 889;">
                <img class="sticky_img" src="../../assets/images/bounty/us-scorll-2.jpg" alt="">
            </div>
            <div class="sticky_text2">From starting right to <br> sleeping tight</div>
            <div class="sticky_img_box" style="z-index: 889;">
                <img class="sticky_img" src="../../assets/images/bounty/us-scorll-3.jpg" alt="">
            </div>
            <div class="sticky_text3">We <br> offer everything to <br> help you</div>
        </section>

        <div style="width:100%;position:relative;z-index:9999;" ref="footer">
            <section class="us-summary2">
                <div class="summary_info">
                    <div class="summary_img_box">
                        <img class="summary_img" src="../../assets/images/bounty/about-us-3.webp" alt="">
                    </div>
                    <div class="summary_data">
                        <h1 class="summary_title">Your body is a brilliant machine. </h1>
                        <h1 class="summary_title">Every day it’s hustling on your behalf. </h1>
                        <div v-scroll-show="'fade-up'" class="summary_important">Your heart beats.</div>
                        <div v-scroll-show="'fade-up'" class="summary_important">Your skin breathes.</div>
                        <div v-scroll-show="'fade-up'" class="summary_important">Your cells are reborn.</div>
                        <div v-scroll-show="'fade-up'" class="summary_important">Who you are today is already enough.
                        </div>
                        <!-- <div v-scroll-show="'fade-up'" class="summary_btn">
                            Explore Products That Supplement You
                        </div> -->
                    </div>
                </div>
            </section>

            <section class="us-summary2" style="background-color: #f8f2eb;padding: 20px 0;">
                <div class="summary_info">
                    <div class="summary_data">
                        <img class="summary_data_img" src="../../assets/images/aboutUs/logo.png?v=1" alt=""
                            style="width: 100px">
                        <h1 class="summary_title">Shine Brighter for the Cure</h1>
                        <div class="summary-description">
                            <p>From fearful to hopeful, a breast cancer journey is filled with millions of moments that
                                can change the course of a person’s life forever.
                            </p>
                            <p>Harvest Gain is proud to help give people more moments of hope and joy, family and
                                friendship, and love and care.
                            </p>
                            <p>As part of our commitment to helping to fund resource and care services for those with
                                breast cancer, Harvest Gain Selenium Supplements will be “Shining Brighter for the Cure”
                                this fall, where for every bottle sold, we will be donating to help support breast
                                cancer patients. Please stay tuned for more details around this initiative coming soon.
                            </p>
                            <p>
                                As a trusted brand dedicated to health and wellness, we are committed to supporting your
                                well-being from the inside out. Whether you’re a fighter, survivor, or know someone who
                                has been impacted by this disease, join us as we shine brighter for the cure, together.
                            </p>
                            <!--                            <div class="summary_btn">-->
                            <!--                                Explore Products That Supplement You-->
                            <!--                            </div>-->
                        </div>
                    </div>
                    <div class="summary_img_box">
                        <img class="summary_img" src="../../assets/images/bounty/about-us-4.webp" alt="">
                    </div>
                </div>
            </section>
            <section class="us-products">
                <div class="product-other">
                    <div class="productother_title">Comprehensive Offerings. Exceptional Quality. Passionate Science.
                        Innovative Solutions. </div>
                    <div class="product_info">We are passionate about the science and ingredients in our products to
                        support
                        you and your family </div>
                    <div class="product-other__list">

                        <div class="product-item" v-for="(item, index) in productArr" :key="index">
                            <img class="product-img" :src="item.img" alt="">
                            <span class="product-name">{{ item.name }}</span>
                            <span class="product-description">{{ item.description }}</span>
                        </div>
                    </div>

                </div>

            </section>

            <section class="us-products2">
                <homeProducct></homeProducct>
                <!-- <div class="product-other">
                    <div class="productother_title">Experience ALL that We Offer to Supplement You </div>
                    <div class="product-other__list">
                        <div class="product-item1" @click="toAllProduct()">
                            <div class="title">Shop Our Favorites</div>
                            <div class="info">Our favorite solutions for supporting your health and natural brilliance.*
                            </div>
                            <a class="link" href="">Explore Our Favorite Products</a>
                        </div>
                        <div class="product-item" v-for="(item, index) in productArr2" :key="index">
                            <img class="product-img" :src="item.img" alt="">
                            <div class="mask"></div>
                        </div>
                    </div>
                </div> -->
            </section>

            <contentBanner />

            <Instagram />
        </div>

    </div>
</template>

<script>
import scrollShow from "@/config/scrollShow";
import contentBanner from "@/components/content-banner/index.vue";
import Instagram from "@/components/instagram/index.vue";
import homeProducct from "@/components/common/homeProducct.vue";
export default {
    name: "aboutUs",
    components: {
        contentBanner,
        Instagram,
        homeProducct,
    },
    data() {
        return {
            productArr: [
              {
                img: require("../../assets/images/bounty/info1.webp"),
                name: "About Us",
                description:
                    "Harvest Gain Biotech is headquartered in Denver, Colorado, USA, with its core R&D team hailing from Enshi, China, known as the \"Selenium Capital of the World.\"\n" +
                    "We are committed to advancing immune health through scientific innovation, bringing centuries-old natural health practices from Enshi, China, to the US market.\n",
              },
              {
                img: require("../../assets/images/bounty/info2.png"),
                name: "Our Product",
                description:
                    "Our signature High-Activity Organic Selenium Tablet combines cutting-edge biotechnology and plant-based innovation.\n" +
                    "It helps to:Strengthen the immune system&Support heart and metabolic health&Protect against oxidative stress and premature aging&Maintain balanced energy and vitality\n" +
                    "Selenium is not just nutrition — it is a daily shield for life and longevity.\n",
              },
              {
                img: require("../../assets/images/bounty/info3.png"),
                name: "Charity Mission",
                description:
                    "Through our Love & Health Donation Program, every purchase becomes a gesture of kindness.\n" +
                    "A portion of proceeds and selenium products are donated regularly to churches, nursing homes, and low-income families, ensuring that wellness and compassion reach those in need.\n" +
                    "At Harvest Gain, every act of care multiplies into love.",
              },
              {
                img: require("../../assets/images/bounty/info4.webp"),
                name: "Our Vision",
                description:
                    "Guided by the belief that faith inspires health, and health empowers giving,\n" +
                    "we aim to unite science, wellness, and charity into one meaningful journey.\n" +
                    "Every member’s participation creates a cycle of prosperity, vitality, and compassion —\n" +
                    "a harvest where blessings grow and love endures.",
              },
            ],
            productArr2: [
                {
                    img: require("../../assets/images/bounty/us-list-1.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-2.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-3.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-4.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-5.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-6.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-7.webp"),
                },
            ],
            images: [
                {
                    image: require("../../assets/images/bounty/AdvMagGly.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",

                },
                {
                    image: require("../../assets/images/bounty/us-list-1.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-2.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-4.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-5.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
            ],
        };
    },
    methods: {
        toAllProduct() {
            this.$router.push({
                path: "/allProduct",
            });
        },
    },
};
</script>
<style scoped lang="less">
.us-header {
    width: 100%;
    min-height: 345px;
    background: #27463a;
    position: relative;

    .header_img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    .header_content {
        // background: linear-gradient(90deg,
        //         rgba(39, 70, 58, 1),
        //         rgba(52, 119, 63, 0) 100%);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .header_content_inner {
            width: 75%;
            z-index: 1;
            padding-top: 80px;
            padding-bottom: 80px;
            font-weight: 500;
            font-family: "sofia-pro", Montserrat, sans-serif;

            .header_t1 {
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                margin-bottom: 12px;
                color: #ffffff;
            }

            .header_t2 {
                color: #f1e5d4;
                font-size: 2.8125rem;
                line-height: 3.4375rem;
            }

            .header_t3 {
                color: #ffffff;
                font-size: 1.5rem;
                line-height: 2.25rem;
                margin-top: 20px;
            }
        }
    }
}

.us-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;
    padding-top: 50px;

    .summary_info {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        grid-gap: 80px;
        gap: 80px;
        margin-top: 40px;

        .summary_img_box {
            width: calc(50% - 40px);
            align-items: center;
            background: linear-gradient(269.9deg,
                    rgba(172, 152, 48, 1) 0.07%,
                    rgba(198, 181, 92, 1) 27.24%,
                    rgba(244, 224, 152, 1) 53.36%,
                    rgba(192, 174, 86, 1) 78.44%,
                    rgba(172, 152, 48, 1) 100.38%);
            display: flex;
            padding: 6px;

            .summary_img {
                width: 100%;
                height: auto;
            }
        }

        .summary_data {
            width: calc(50% - 40px);

            .summary_title {
                font-size: 30px;
                font-weight: 800;
                letter-spacing: -0.27px;
                line-height: 34px;
            }

            .summary_important {
                font-size: 30px;
                font-weight: 800;
                letter-spacing: -0.27px;
                line-height: 34px;
            }

            .summary-description {
                margin-top: 25px;

                p {
                    color: #000000;
                    font-weight: 500;
                    font-size: 16px;
                    margin: 12px 0;
                    line-height: 32px;
                }
            }
        }
    }
}

.bg-img-t {
    width: 100%;
    height: auto;
}

.us-sticky {
    width: 100%;

    .sticky_img_box {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow: hidden;
    }

    .sticky_img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }

    .sticky_text1 {
        width: 100%;
        height: 100vh;
        padding: 40px;
        box-sizing: border-box;
        font-size: 38px;
        color: #ffffff;
        position: relative;
        z-index: 888;
    }

    .sticky_text2 {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        box-sizing: border-box;
        font-size: 38px;
        color: #ffffff;
        position: relative;
        z-index: 900;
    }

    .sticky_text3 {
        width: 100%;
        height: 100vh;
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        box-sizing: border-box;
        font-size: 38px;
        color: #ffffff;
        position: relative;
        z-index: 888;
    }
}

.us-summary2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;

    .summary_info {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        grid-gap: 80px;
        gap: 80px;
        margin-top: 20px;

        .summary_img_box {
            width: calc(50% - 40px);
            align-items: center;
            background: linear-gradient(269.9deg,
                    rgba(172, 152, 48, 1) 0.07%,
                    rgba(198, 181, 92, 1) 27.24%,
                    rgba(244, 224, 152, 1) 53.36%,
                    rgba(192, 174, 86, 1) 78.44%,
                    rgba(172, 152, 48, 1) 100.38%);
            display: flex;
            padding: 6px;

            .summary_img {
                width: 100%;
                height: auto;
            }
        }

        .summary_data {
            width: calc(50% - 40px);

            .summary_data_img {
                width: 200px;
                height: auto;
                margin-bottom: 40px;
            }

            .summary_title {
                font-size: 30px;
                font-weight: 800;
                letter-spacing: -0.27px;
                line-height: 34px;
                translate: none;
                rotate: none;
                scale: none;
                opacity: 1;
                transform: translate(0px, 0px);
            }

            .summary_important {
                //translate: none;
                //rotate: none;
                //scale: none;
                //opacity: 1;
                //transform: translate(0px, 0px);
                color: #85b336;
                font-size: 30px;
                font-weight: 700;
                line-height: initial;
                margin-block: 20px;
            }

            .summary_btn {
                translate: none;
                rotate: none;
                scale: none;
                opacity: 1;
                transform: translate(0px, 0px);
                font-size: 1.2rem;
                text-decoration: none;
                padding: 16px 30px;
                min-width: 256px;
                border-radius: 50px;
                margin-top: 40px;
                display: block;
                width: fit-content;
                transition: all 0.2s ease-out;
                color: #27463a;
                background-color: #d2e38f;
                border: 2px solid;
                border-color: #d2e38f;
                font-weight: 700;
                line-height: initial;
                margin-block: 20px;
                cursor: pointer;
            }

            .summary_btn:hover {
                background-color: rgba(0, 0, 0, 0);
            }

            .summary-description {
                margin-top: 25px;

                p {
                    color: #000000;
                    font-weight: 500;
                    font-size: 16px;
                    margin: 12px 0;
                    line-height: 28px;
                }
            }
        }
    }
}

.us-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;
    padding: 80px 0;

    .product-other {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .productother_title {
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            font-size: 40px;
            font-weight: 600;
            line-height: 50px;
            color: #000000;
            text-align: center;
        }

        .product_info {
            color: #000000;
            font-size: 18px;
            margin-top: 20px;
        }

        .product-other__list {
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 20px;

            .product-item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 40px 30px;
                box-sizing: border-box;

                .product-img {
                    max-height: 100px;
                    width: auto;
                    padding: 0;
                    margin-bottom: 20px;
                }

                .product-name {
                    font-size: 18px;
                    line-height: 22px;
                    font-weight: 800;
                    margin-bottom: 10px;
                }

                .product-description {
                    font-weight: 500;
                    font-size: 15px;
                    text-align: left;
                    line-height: 22px;
                    width: 215px;
                    max-width: 100%;
                    margin: auto;
                }

                .product-btn {
                    max-width: 256px;
                    padding: 18px 10px;
                    width: 100%;
                    font-size: 18px;
                    background-color: #d2e38f;
                    color: #27463a;
                    border: 1px solid #d2e38f;
                    transition: all 0.2s ease-in-out;
                    margin-top: 30px;
                    border-radius: 30px;
                    text-align: center;
                    font-weight: 500;
                    cursor: pointer;
                }

                .product-btn:hover {
                    background-color: #f7f8f9;
                    border: 1px solid #d8d8d8;
                    transition: all 0.2s ease-in-out;
                }
            }
        }
    }
}

.us-products2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;
    padding-bottom: 40px;

    .product-other {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .productother_title {
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            font-size: 40px;
            font-weight: 600;
            line-height: 50px;
            color: #000000;
            text-align: center;
            margin-bottom: 40px;
        }

        .product-other__list {
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 20px;

            .product-item1 {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                box-sizing: border-box;
                width: 285px;
                height: 330px;
                background: #27463a;
                border-radius: 5px;
                padding: 12px;
                box-sizing: border-box;

                .title {
                    color: #d2e38f;
                    font-weight: 700;
                    font-size: 25px;
                    line-height: 50px;
                }

                .info {
                    color: #ffffff;
                    text-align: center;
                    max-width: 480px;
                    padding: 0 32px;
                    text-wrap: balance;
                    text-wrap: pretty;
                    font-size: 14px;
                    margin-top: 25px;
                }

                .link {
                    color: #ffffff;
                    padding: 0 15px;
                    font-size: 16px;
                    text-decoration: underline;
                    margin-top: 20px;
                }

                .link:hover {
                    text-decoration: none;
                }
            }

            .product-item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                box-sizing: border-box;
                width: 285px;
                height: 330px;
                overflow: hidden;
                position: relative;
                border-radius: 5px;

                .product-img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s ease;
                }

                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0, 0, 0, 0.4);
                    transition: all 0.3s ease;
                    opacity: 0;
                    z-index: 1;
                }
            }

            .product-item:hover {
                .product-img {
                    transform: scale(1.1);
                }

                .mask {
                    opacity: 1;
                    transition: all 0.3s ease;
                }
            }
        }
    }
}

.us-years {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 245px;
    background: #7fa76e;

    .years_img {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .years_content {
        color: #fff;
        margin: 31px auto 0 auto;
        padding: 0 10px;
    }
}

.us-follow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 245px;
    padding: 30px 0;

    .follow_content {
        color: #000000;
        font-size: 22px;
        font-weight: 500;
    }

    .follow_list {
        width: 100%;
        max-width: 1400px;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 40px;

        .image-box {
            width: 272px;
            height: 272px;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }

        .thumbnail {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .tooltip {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 100;
            backdrop-filter: blur(6px);
            padding: 16px;
            box-sizing: border-box;

            .tooltip_title {
                text-align: center;
                color: #d2e38f;
            }

            .tooltip_info {
                text-align: center;
                color: #fff;
                margin-top: 14px;
            }

            .shop-now-btn {
                max-width: 200px;
                padding: 8px 10px;
                width: 100%;
                font-size: 16px;
                background-color: #d2e38f;
                color: #27463a;
                border: 1px solid #d2e38f;
                transition: all 0.2s ease-in-out;
                margin-top: 30px;
                border-radius: 20px;
                text-align: center;
                font-weight: 500;
                cursor: pointer;
            }

            .shop-now-btn:hover {
                background-color: rgba(0, 0, 0, 0);
                border: 1px solid #ffffff;
                transition: all 0.2s ease-in-out;
                color: #ffffff;
            }
        }

        .image-box:hover {
            .tooltip {
                opacity: 1;
                transition: opacity 0.3s ease;
            }

            .thumbnail {
                transform: scale(1.07);
            }
        }
    }
}

.custom_pos_l {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    line-height: 1.2;
    font-family: var(--font-body-family);
    font-weight: 700;
    width: 400px;
    max-width: 80%;
}

.custom_pos_r {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed !important;
    top: 0;
    right: 50px;
    width: 100%;
    height: 100%;

    .custom_pos_text {
        font-size: 5rem;
        line-height: 2;
        color: #d2e38f;
        overflow: hidden;
        font-weight: 800;
        text-shadow: 2px 2px 2px #00000033;
    }
}
</style>
